<template>
	<a-menu mode="inline" :inline-collapsed="collapse" @click="routerJump" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
		<brs-menu-item :menus="menuTree"></brs-menu-item>
	</a-menu>
</template>

<script lang="ts" setup>
	import { useMenuStore } from '@/store/menuStore';
	import { getMenuByAttr } from '@/utils/router';
	import { computed, ref, watch } from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	import brsMenuItem from './brs-menu-item.vue';
import { ISystem } from '@/types/ISystem';

	const route = useRoute();
	const router = useRouter();

	const menuStore = useMenuStore();
	const menuTree = computed(() => menuStore.menuTree);
	const collapse = computed(() => menuStore.collapse);

	// 当前展开的 SubMenu 菜单项 key 数组
	const openKeys = ref(['/deskboard/index']);

	// 当前选中的菜单项 key 数组
	const selectedKeys = ref(['/deskboard/index']);

	// 菜单点击跳转
	const routerJump = ({ key }: { key: string }) => {
		const menu = getMenuByAttr(key, 'id');
		if (menu) {
			router.push(menu.path);
		}
	};

	watch(
		() => route.path,
		() => {
			const { meta } = route;
			const menu = getMenuByAttr((meta.menu as ISystem.IMenu).id, 'id');
			if (menu) {
				// 设置选中
				selectedKeys.value = [menu.id];
				openKeys.value = [menu.pid];
			} else {
				selectedKeys.value = [];
				openKeys.value = [];
			}
		},
		{ immediate: true }
	);
</script>

<style lang="less" scoped>
	.ant-menu {
		:deep(.ant-menu-submenu-title),
		:deep(.ant-menu-item) {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
			height: 50px;
			line-height: 50px;
		}
	}
</style>
